<script setup lang="ts">
import { inject } from 'vue'
import { appConfig as configType } from '../config'

// 获取全局配置并提供默认值
const appConfig = inject<typeof configType>('appConfig', configType)
</script>

<template>
  <header class="bg-background p-4 shadow-md">
    <div class="container mx-auto">
      <h1 class="text-primary text-2xl font-bold">{{ appConfig.appName }}</h1>
      
      <!-- 主题色展示 -->
      <div class="flex space-x-4 mt-4">
        <div class="w-16 h-16 bg-primary rounded-md flex items-center justify-center text-white">主色调</div>
        <div class="w-16 h-16 bg-success rounded-md flex items-center justify-center text-white">成功色</div>
        <div class="w-16 h-16 bg-warning rounded-md flex items-center justify-center text-white">警告色</div>
        <div class="w-16 h-16 bg-danger rounded-md flex items-center justify-center text-white">危险色</div>
        <div class="w-16 h-16 bg-info rounded-md flex items-center justify-center text-white">信息色</div>
      </div>
      
      <!-- 文字颜色展示 -->
      <div class="mt-4">
        <p class="text-text-primary">主要文字颜色</p>
        <p class="text-text-regular">常规文字颜色</p>
        <p class="text-text-secondary">次要文字颜色</p>
        <p class="text-text-placeholder">占位符文字颜色</p>
      </div>
    </div>
  </header>
</template> 